<template>
  <a-date-picker
    :value="year"
    style="width: 100%;"
    @panelChange="handleYearChange"
    mode="year"
    format="YYYY"
    :open="yearOpen"
    @openChange="handleYearOpenChange"
  />
</template>

<script>
import moment from 'moment';

export default {
  name: 'yearpicker',
  props: {
    value: {
      type: Object,
      default: () => moment()
    }
  },
  data() {
    return {
      yearOpen: false,
      year: this.value
    };
  },
  watch: {
    value(val = null) {
      this.year = val;
    }
  },
  methods: {
    /**
     * @desc: 年份选择器change回调
     * @param {string} val YYYY年份
     * @author: youzi
     */
    handleYearChange(val) {
      // console.warn(val);
      this.$emit('change', val);
      this.yearOpen = false;
    },
    /**
     * @desc: 年份选择器打开关闭的回调
     * @param {bool} val true or false
     * @author: youzi
     */
    handleYearOpenChange(val) {
      this.yearOpen = val;
    }
  }
};
</script>